<template>
    <div class="main">
        <div class="top">
            <div class="left">
                <span>需求描述： </span>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <span style="margin-left: 60px;">应用场景： </span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="search" type="primary">查询</el-button>
                <el-button @click="nosearch" style="margin-left: 10px; width: 80px;">重置</el-button>
            </div>
        </div>
        <el-button type="primary" class="button" @click="show">新增文件</el-button>
        <el-table class="table" :data="tableData" tooltip-effect="dark" style="width: 100%" fit
            :row-style="{ height: '50px' }"
            :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }">
            <el-table-column label="序号" type="index" width="80"> </el-table-column>
            <el-table-column prop="name" label="需求描述" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="应用场景" width="220"></el-table-column>
            <el-table-column prop="host" label="版本"></el-table-column>
            <el-table-column prop="order" label="优先级"></el-table-column>
            <el-table-column prop="date" label="提交日期" width="200"></el-table-column>
            <el-table-column prop="staus" label="审批状态"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <a href="javascript:" @click="run">关联关系</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: "",
            options: [{
                label: "全部",
                value: "全部",
            }],
            value: '全部',
            tableData: [
                {
                    name: "登岛作战",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标2进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标3进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标4进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标5进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标6进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标7进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标8进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标9进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标10进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                }
            ],
            copy: [],
        }
    },
    methods: {
        run() {
            this.$router.push("/detail1");
        },
        search() {
            this.copy = this.tableData;
            this.tableData = this.tableData.filter(item => item.name.includes(this.input) || item.type.includes(this.input) || item.host.includes(this.input) || item.date.includes(this.input));
        },
        nosearch() {
            this.tableData = this.copy;
            this.input = "";
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../font/file.less");
</style>